<template>
    	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

  <view class="page-container">
    <view class="particle-container">
      <!-- 粒子容器 -->
      <view class="particles-wrapper">
        <view class="particle p1"></view>
        <view class="particle p2"></view>
        <view class="particle p3"></view>
        <view class="particle p4"></view>
        <view class="particle p5"></view>
        <view class="particle p6"></view>
        <view class="particle p7"></view>
        <view class="particle p8"></view>
        <view class="particle p9"></view>
        <view class="particle p10"></view>
        <view class="particle p11"></view>
        <view class="particle p12"></view>
        <view class="particle p13"></view>
        <view class="particle p14"></view>
        <view class="particle p15"></view>
      </view>

      <!-- 内容区域 -->
      <view class="header-content">
        <view class="header-title">
          <text>小锚助手</text>
        </view>
        <view class="header-subtitle">
          <text>您的健康管家</text>
        </view>
      </view>
    </view>
   

    <view class="set-view">
<view class="grid-menu-container">
			<view class="layout1">
<!-- 顶部标题 -->
			<view class="header">
			  <text class="title text13">今日健康状态</text>
			</view>
			<view class="grid-container">
				
			    <view 
				v-if="healthData.length>0"
			      class="grid-row" 
			      v-for="(item, index) in healthData" 
			      :key="index"
			    >
			      <!-- 使用 iconfont -->
			      <view class="icon-view">
			        <text class="iconfont" :class="item.icon"></text>
			      </view>
			
			      <view class="text-view">
			        <view class="row1">
			          <text class="text13 fm500">{{ item.title }}</text>
			        </view>
			        <view class="row2">
			          <text class=" text11 ">{{ item.value }}</text>
			          <text class=" text11 ">{{ item.unit }}</text>
			        </view>
			      </view>
			    </view>
			  </view>
			  <view class="view3">
          <view class="child-view">
            		<view class="left">
				<text class=" text_desc text10 fm500">上次测量时间：</text>
        <text class="text_desc text10">2025-12-25 12:03</text>
			</view>
			<view class="right" @click="navigationUrl">
              <wd-button plain size="small">查看报告</wd-button>

			</view>
          </view>
	
			
			  </view>
      </view>
		</view>
		<!-- bg1end -->
    </view>
		

    <view class="my-server">
      <view class="work-order-page">
        <!-- 标题栏 -->
        <view class="page-title">
          <text class="text13">自己服务工单</text>
        </view>

        <!-- 工单列表 -->
        <view class="order-list">
          <orderItems :orderList="orderList" type="read" />
        </view>
      </view>
    </view>
  </view>
 		<TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>
// 静态组件，无额外逻辑

import {oldman_serviceRecordApi} from "@/api/oldman"
import orderItems from "@/components/orderItems/index.vue"
	
import {
		ref,
		onMounted,
		computed,
		nextTick
		} from 'vue';
	import {
		useRouter
	} from 'uni-mini-router'
	
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	import {
		useTabStore
	} from '@/stores/tabs'
	import {
		ROLE_TABS
	} from "@/config/roles"
	import TabComponent from '@/components/tab-bar/index.vue'
	
	import { useShare } from '@/utils/useShare';
	
	import { onShow } from '@dcloudio/uni-app';
	

	// 配置分享内容
	const { onShareAppMessage, onShareTimeline } = useShare({
	  title: '欢迎',
	  path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
	  imageUrl: '/static/share-cover.jpg',
	  query: '' // 朋友圈参数（可选）
	});
	
	
	const fontSizeStore = useFontSizeStore();
	const router = useRouter();
	
	// ✅ 计算当前角色的 tabs
	const currentTabs = computed(() => {
  const role = getApp()[getAppEnum.CurrentRole];
  return ROLE_TABS[role]?.tabs
	})
	
	// ✅ Tab 点击处理
	const onTabChange = (tab) => {
		nextTick(()=>{
		router.pushTab({
			name: tab.key
		}) 	
		})
	}

  let healthData = ref([])

	const generateGradients = (count) => {
  return Array.from({ length: count }, (_, i) => {
    const hueStart = 180    // 青蓝色
    const hueEnd = 320      // 紫红色
    const hue = hueStart + (i / (count - 1 || 1)) * (hueEnd - hueStart)
    
    const color1 = `hsl(${hue}, 70%, 50%)`
    const color2 = `hsl(${(hue + 30) % 360}, 80%, 60%)`
    
    return `linear-gradient(135deg, ${color1}, ${color2})`
  })
}
// mock 数据：包含“长辈工单”和“自己工单”
const orderList = ref([]);
onMounted(() => {
 
  healthData.value = [
    { title: '血压', value: '120', unit: 'mmHg', icon: 'icon-xitongtuisong' },
    { title: '心率', value: '5.2', unit: 'mmol/L', icon: 'icon-xietang' },
    { title: '血糖', value: '7.5', unit: '小时',   icon: 'icon-shuimian1' },
	{ title: '睡眠', value: '7.5', unit: '小时',   icon: 'icon-shuimian1' }
  ]

  oldman_serviceRecordApi({id:1}).then((res)=>{
      if(res.code==200){
        orderList.value=res.data;
      }
  })
})

const navigationUrl=()=>{
  router.push({
    name:"common_healthItems",
    params:{
      id:1
    }
  })
}

// 1. Tab 配置列表（4个常见 Tab：首页、分类、购物车、我的）
const tabList = ref([
  {
    text: '首页',
    path: '/pages/home/home', // 页面路径（必须在 pages.json 注册）
    normalIcon: '/static/tab/home-normal.png', // 未选中图标
    activeIcon: '/static/tab/home-active.png'  // 选中图标
  },
  {
    text: '分类',
    path: '/pages/category/category',
    normalIcon: '/static/tab/category-normal.png',
    activeIcon: '/static/tab/category-active.png'
  },
  {
    text: '购物车',
    path: '/pages/cart/cart',
    normalIcon: '/static/tab/cart-normal.png',
    activeIcon: '/static/tab/cart-active.png'
  },
  {
    text: '我的',
    path: '/pages/mine/mine',
    normalIcon: '/static/tab/mine-normal.png',
    activeIcon: '/static/tab/mine-active.png'
  }
])

// 菜单数据
const menuList = ref([
  { title: '生活照料', icon: 'icon-a-shenghuozhaoliaoyi' },
  { title: '家', icon: 'icon-home-heart-line' },
  { title: '健康管家', icon: 'icon-shengchanlingyongdan' },
  { title: '智慧设备', icon: 'icon-shebei3' },
  { title: '健康预约', icon: 'icon-yuyuedan' },
  { title: '工单服务', icon: 'icon-fuwujilu3' }
]);

 

// 根据状态获取样式类名
const getStatusClass = (status) => {
  const classMap = {
    pending: 'status-pending',
    confirmed: 'status-confirmed',
    processing: 'status-processing',
    completed: 'status-completed'
  };
  return classMap[status] || '';
};

</script>

<style lang="less" scoped>
	@import '@/static/styles/colors.less';
	@import '@/static/styles/volunteer/home/index.less';

  .grid-menu-container{
    padding: 30rpx;
    
  }


.layout1 {
    border-radius: 9px;
    border: 1rpx solid #efefef;
  // background-color: #ffffff;
  // padding: 16px;
  border-radius: 16px;
  background-color: #fff;
  // margin-bottom: 18px;
  // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  .header{
    padding: 30rpx;
    .title{
      font-weight: 500;
    }
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
    

  .grid-row {

 
    display: flex;
    align-items: center;
    color: @color-text-dark;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s ease;
    padding: 30rpx;
    

    &:hover {
      transform: translateY(-2px);
    }

    .icon-view {
      margin-right: 12px;
      background: rgba(255, 255, 255, 0.2);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      .iconfont {
        color: @color-text-dark;
        font-size: 20px;
      }
    }

    .text-view {
      flex: 1;

      .row1 {
        text {
          font-size: 15px;
        }
      }

      .row2 {
        display: flex;
        align-items: baseline;
        margin-top: 4px;

        .text1 {
          font-size: 20px;
        }

        .text2 {
          font-size: 12px;
          opacity: 0.9;
          margin-left: 4px;
        }
      }
    }
  }
}


.view3{

  padding:0 30rpx;
  
 .child-view{
    display: flex;
      padding:30rpx 0rpx;
  width: 100%;
      justify-content: center;
    align-items: center;
   border-top: 1rpx solid #e6e6e6;
   .left{
    flex: 1;
    display: flex;
    flex-direction: column;
    .text_desc{
      line-height: 50rpx;
    }
   
  }
  .right{
    flex: 0 0 120rpx;
  }
 }
}

// .work-order-page{
//   border: 1rpx solid #efefef;
// }

.my-server{
   padding: 10rpx;
}

</style>